<template>
  <div>
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="What needs to be done?"
        v-focus
        @keyup.enter="addItem"
        v-model="todoName"
      />
    </header>
  </div>
</template>

<script>
import Vue from 'vue';
import {mapMutations} from 'vuex'
//自定义指令获取焦点
Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  },
});
export default {
  name: 'Header',
  data(){
    return {
      todoName:'',
    }
  },
  methods:{
    ...mapMutations(['ADD']),
    //添加数据
    addItem(){
      this.ADD(this.todoName)
      //清空 
      this.todoName =''
    }
  }
};
</script>

<style></style>
